<template>
<div id="box">
     <div id="quanzi_box">
        <div id="quanzi_header">
            <div id="quanzi_img">
                <img src="./../../static/img/123.jpg" alt="">
            </div>
            <div id="quanzi_detaill">
                <p>手办</p>
                <small>欢迎发布手办相关内容</small>
            </div>
        </div>

        <div class="product" v-for="(item,index) in product_list.doc" :key="index">
            <router-link :to="{path:'/detail',query:{id:item._id,name:name}}">
              <router-link to="/" class="name">
                <div class="name_img">
                  <img src="./../../static/img/toux.jpg" alt="">
                </div>
                <div class="info">
                  <p>{{product_list.name[index].name}}</p>
                  <p>{{item.createTime}}</p>
                </div>
              </router-link>
              <div class="content">
                <p>{{item.text}}</p>
                <div class="content_img" v-if="item.imgPath.length!=0">
                  <div class="img_zhu" >
                    <img :src="'http://drcy.wyx.ac.cn/'+item.imgPath[0]" alt="">
                  </div>
                  <div class="img_fu">
                    <div v-for="(item1,index) in item.imgPath" :key="index">
                      <img :src="'http://drcy.wyx.ac.cn/'+item1" alt=""  v-if="index!=0&&index<3">
                    </div>
                  </div>
                </div>
                <div :style="item.videoPath?'':'display:none'">
                    <video :src="'http://drcy.wyx.ac.cn/'+item.videoPath" style="width:100%" controls="controls"></video>
                </div>
              </div>
             
             
            </router-link>
        </div>
    </div>
    <div id="fabu" @click="animate">
        <div class="fb_img">
            <img src="./../../static/img/fb.png" alt="">
        </div>
        <p>发布</p>
    </div>
    <tanchu :parent_value="flag2" :id="name"></tanchu>
</div>
   
</template>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    p{
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    #quanzi_box{
        width: 100%;
        background: url('./../../static/img/bck1.jpg');
        overflow: hidden;
    }
    #quanzi_header{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: .5em;
    }
    #quanzi_header>#quanzi_img{
        width: 20%;
        height: 74px;
        border-radius: 5px;
        overflow: hidden;
    }
    #quanzi_header>#quanzi_img>img{
        width: 100%;
        height: 100%;
    }
    #quanzi_detaill{
        width: 70%;
        color: #fff;
    }
    #list_box{
        width: 100%;
        height: 50px;
        border-radius: 10px 10px 0 0;
        background: #fff;
        margin-top: 2em;
    }
    #fabu{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        color: #fff;
        background: #36d8a5;
        text-align: center;
        position: fixed;
        right: 1em;
        bottom: 1em;
        box-shadow: 0px 0px 5px #a4a7a6;
        
    }
    #fabu>.fb_img{
        width: 30px;
        height: 30px;
        margin: 0 auto;
    }
     #fabu>.fb_img>img{
        width: 100%;
        height: 100%;
    }


    .product{
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e4dbdb;
  margin-bottom: .5em;
}
  .name{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: .5em;
  }
  .name>.info{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .name>.info>p:last-child{
    font-size: .5em;
    color: #565656;
  }
  .name>.name_img{
    width: 10%;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
  }
  .name>.name_img>img{
    width: 100%;
    height: 100%;
  }
  .content{
    padding: .5em;
  }
  .content>p{
   text-indent: 1em;
  }
  .content_img{
    width: 100%;
    display: flex;
  }
  .content_img>.img_zhu{
    width: 65%;
  }
  .content_img>.img_zhu>img{
    width: 100%;
    height: 100%;
  }

</style>
<script>
import tanchu from '@/components/tanchu.vue'
import axios from 'axios'
import moment from 'moment'

export default {
    data(){
        return {
            flag2:false,
            name:"3",
            product_list:{},
        }   
    },
    created(){
        this.getAll()
    },
    components:{
        tanchu
    },
    props:["parent_value","id"],
    methods:{
        animate(){
            this.flag2 = !this.flag2;
        },
        getAll(){
        axios.get('http://localhost:3000/findAll',
          {
            params:{
              page:this.page,
              id:this.name
            }
          }
        ).then(res=>{
          let response=res.data;
          
          if(response.status==200){
            this.product_list=response.res;
            this.product_list.doc.forEach(item=>{
              item.createTime=moment(item.createTime).format("YYYY-MM-DD hh:mm:ss")
            })
          }else{
            console.log("123")
          }
        })
      },
        infiniteHandler($state) {
          axios.get('http://localhost:3000/findAll',{ 
            params:{
              page:++this.page,
              id:this.name
            }
          }).then(res=>{
            const response=res.data;
            if(response.status==200&&this.product_list!=undefined){
              this.product_list.doc.push(...response.res.doc)
              this.product_list.name.push(...response.res.name)
              this.product_list.doc.forEach(item=>{
                item.createTime=moment(item.createTime).format("YYYY-MM-DD hh:mm:ss")
              })
              $state.loaded();
              
            }
            if(response.res.doc.length<10){
              this.show=false;
              this.text_show=true;
              $state.complete();
            }
          })
    },
    }

}
</script>
